<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background-image: url(../image/bigscreen-bj.png);
            background-size: 100% 100%;
        }

        .pubHead {
            width: 100%;
            height: 80px;
            padding-left: 40px;
            box-sizing: border-box;
            background-color: #011a42;
        }

        .log {
            float: left;
            width: 40px;
            height: 42px;
            margin-top: 19px;
            background: url('../image/logo.png') no-repeat;
        }

        .logtitle {
            float: left;
            margin-left: 10px;
            height: 80px;
            line-height: 80px;
            width: auto;
            font-size: 22px;
            color: #00AEF4;
        }

        .main {
            flex: 1;
            /*background: #0A0F34;*/
            /* background: url("../image/bigscreen-bj.png") no-repeat 100%; */
            width: 100%;
            padding: 0 28px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

        .top {
            width: 100%;
            height: 70px;
        }

        .top>span {
            height: 70px;
            line-height: 70px;
            display: inline-block;
            float: left;
            margin-left: 10px;
            font-size: 16px;
            color: #0162A6;
        }

        .top .circle {
            width: 8px;
            height: 8px;
            background-color: #0162A6;
            margin-top: 30px;
            margin-left: 15px;
        }

        .top .endspan {
            color: #47CDFE;
        }

        .main_body {
            width: 100%;
            flex: 1;
            display: flex;
            border: solid 1px #0E5283;
            margin-bottom: 20px;
            border-radius: 6px;
        }

        .main_left {
            width: 62%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .map_title {
            z-index: 1000;
            height: 50px;
            line-height: 50px;
            color: #47CDFE;
            font-size: 18px;
            padding: 0 20px;
            text-align: center;
        }

        .main_right {
            width: 590px;
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .main_title {
            height: 50px;
            line-height: 50px;
            color: #47CDFE;
            font-size: 18px;
            padding: 0 20px;
            background: #00295C;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .box {
            height: 396px;
            display: flex;
            flex: 1;
            flex-direction: column;
            flex-wrap: nowrap;
            margin: 15px 72px 15px 0;
            background: #0B2251;
            border: solid 1px #002759;
        }

        #right_top {
            height: 396px;
            padding: 10px;
            flex: 1;
        }

        #right_bottom {
            display: flex;
            flex: 1;
            padding: 10px;
            height: 396px;
        }

        .people_number {
            font-size: 36px;
            color: #FFFF00;
        }

        .el-input__inner {
            background-color: #00295C !important;
            border: 1px solid #056DAD !important;
            color: rgb(0, 174, 244) !important;
        }

        .el-cascader__label,
        .el-cascader__label span {
            color: #0162A6;
        }

        .add_content {
            display: none;
        }

        .tabUl {
            float: left;
            margin-left: 285px;
            overflow: hidden;
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            color: #79afff;
            font-size: 18px;
            cursor: pointer;
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pubHead">
            <div class="log"></div>
            <div class="logtitle">福山公安数据治理系统</div>
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                </li>
                <!-- <li :class="{'li_active':activeIndex === 1}">数据源注册</li>
    <li>数据采集任务管理</li>
    <li>数据采集监控</li>
    <li>录入工具</li>
    <li>资源目录</li> -->
            </ul>
        </div>
        <div class="main">
            <div class="top">
                <span class="circle"></span>
                <span>智能作战系统</span>
                <span>></span>
                <span>地界防控</span>
                <span>></span>
                <span class="endspan">人口流向分析</span>
                <el-button type="primary" size="mini" @click="goBack" style="position:absolute;right:5rem;margin-top:1rem">
                    返回
                </el-button>
            </div>
            <div class="main_body">
                <div class="main_left">
                    <div class="map_title">
                        <p style="font-size: 36px">外来人口监测</p>
                        <p style="font-size: 18px">
                            昨日外来人口
                            <span class="people_number">{{people}}</span>
                            人。{{timetype==='1' ? '昨日' : timetype==='2' ? '本周' : timetype==='3' ? '本月' : ''   }}同比
                            <el-select v-model="timetype" @change="timeChange" placeholder="请选择" style="width: 90px;">
                                <el-option v-for="item in option1" :key="item.type" :label="item.label" :value="item.type">
                                </el-option>
                            </el-select>
                            {{percentage}}
                        </p>
                    </div>
                    <div id="left_echarts" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="main_right">
                    <div class="box">
                        <div class="main_title">
                            外来人口排行榜（Top10）
                            <el-select v-model="type" placeholder="选择时间" @change="topChange" style="float: right;">
                                <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div id="right_top">

                        </div>
                    </div>
                    <div class="box">
                        <div class="main_title">
                            <span>重点关注来源地</span>
                            <span class="add_content">
                                <el-cascader style="width: 10rem;" :title="selectedOptions | codeToText" @change="focusChange" :options="cityData" v-model="selectedOptions"
                                    @change="handleChange">
                                </el-cascader>
                                <i class="el-icon-circle-plus-outline" style="font-size: 24px;cursor: pointer" @click="addSure"></i>
                            </span>
                            <span>
                                <el-button size="mini" type="primary" style="background: #47CDFE;border: none;margin: 10px 0;" @click="add">增加
                                </el-button>
                                <el-button size="mini" type="primary" style="background: #47CDFE;border: none;margin: 10px 0;" @click="detele">清空
                                </el-button>
                            </span>
                        </div>
                        <div id="right_bottom"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> -->
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script src="../js/areaData.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../js/china.js"></script>
    <script src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script src="../js/geoCoordMap.js"></script>

    <script type="text/javascript" src="../js/element/element.js"></script>

    <script type="text/javascript">
        $(function () {
            new Vue({
                el: '#app',
                data: {
                    people: '',
                    type: '1',
                    timetype: '1',
                    percentage: '',
                    menuList: [{
                        name: '归属地查询',
                        path: './attributionSearch.html'
                    },
                    {
                        name: '外来人口监测',
                        path: './externalPeople.html'
                    },
                    {
                        name: '外来人口驻留分析',
                        path: './peopleAnalyse.html'
                    },
                    {
                        name: '人口流向分析',
                        path: './populationAnalysis.html'
                    }
                    ],
                    activeIndex: 3,
                    cityData: provinceAndCityData,
                    selectedOptions: [],
                    list: [],
                    listCode: [],
                    cityList: [],
                    mapsList: [],
                    citys: [],
                    person_num: [],
                    provinceList: [],
                    addData: {},
                    val: [],
                    vals: [],
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    timeOption: [{
                        value: '1',
                        label: '最近一天'
                    }, {
                        value: '2',
                        label: '最近一周'
                    }, {
                        value: '3',
                        label: '最近一月'
                    }],
                    value: 1,
                    option1: [{
                        type: '1',
                        label: '前日'
                    }, {
                        type: '2',
                        label: '上周'
                    }, {
                        type: '3',
                        label: '上月'
                    }],
                    option3: {}
                },
                mounted() {
                    this.migrantsList()
                    this.mapList()
                    this.peopleList()                    
                    this.focusSource()
                },
                methods: {
                    routerGo(item) {
                        window.location.href = item.path
                    },
                    goBack() {
                        // 返回bigHome
                        window.location.href = 'bigHome2.html'
                        // this.$router.push('bigHome')
                    },
                    initEcharts() {
                        var self = this
                        var myChart1 = echarts.init(document.getElementById('left_echarts'));

                        var BJData = [];

                        for (var i = 0, len = self.mapsList.length; i < len; i++) {
                            var temp = [{ name: '烟台' }, {
                                name: self.mapsList[i][1].name,
                                value: self.mapsList[i][1].value
                            }];
                            BJData.push(temp)
                        }

                        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

                        var convertData = function (data) {
                            var res = [];
                            for (var i = 0; i < data.length; i++) {
                                var dataItem = data[i];
                                var toCoord = [121.39, 37.52];
                                var fromCoord = getProvincePosition(dataItem[1].name);
                                if (fromCoord && toCoord) {
                                    res.push({
                                        fromName: dataItem[0].name,
                                        toName: dataItem[1].name,
                                        coords: [fromCoord, toCoord],
                                        value: dataItem[1].value
                                    });
                                } else {
                                    console.log("can not find  province = " + dataItem[1].province + "； city= " + dataItem[1].city)
                                }
                            }
                            return res;
                        };
                        var color = ['#a6c84c', '#ffa022', '#46bee9'];
                        var series = [];
                        var dataList = convertData(BJData);

                        [['烟台', BJData]].forEach(function (item, i) {
                            var name = {
                                name: ' ',
                                type: 'lines',
                                zlevel: 1,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0.7,
                                    color: '#fff',
                                    symbolSize: 3
                                },
                                lineStyle: {
                                    normal: {
                                        color: color[i],
                                        width: 0,
                                        curveness: 0.2
                                    }
                                },
                                data: convertData(BJData)
                            };
                            var lines = {
                                name: item[0] + ' Top10',
                                type: 'lines',
                                zlevel: 2,
                                symbol: ['none', 'arrow'],
                                symbolSize: 10,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0,
                                    symbol: planePath,
                                    symbolSize: 15
                                },
                                lineStyle: {
                                    normal: {
                                        color: color[i],
                                        width: 2,
                                        opacity: 0.6,
                                        curveness: 0.2
                                    }
                                },
                                data: dataList
                            };
                            var effectScatter = {
                                name: ' ',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                zlevel: 2,
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}'
                                    }
                                },
                                symbolSize: function (val) {
                                    return 10;
                                },
                                itemStyle: {
                                    normal: {
                                        color: color[i]
                                    }
                                },
                                data: dataList.map(function (dataItem) {
                                    var t1 = dataItem.toName;
                                    var t2 = dataItem.coords[0].concat([dataItem.value]);
                                    return {
                                        name: t1,
                                        value: t2
                                    };
                                })
                            };
                            series.push(
                                name,
                                lines,
                                effectScatter
                            );
                        });
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    console.log(params)
                                    if(params.componentSubType !== 'effectScatter') return ''
                                    if(params.componentType !== 'series') return ''
                                    // if (!params.data.value) return ''
                                    // if (!params.data.value[2]) return ''
                                    let name = params.data.name ? params.data.name : ''
                                    let value= ''
                                    try {
                                        let valArr = params.value[2].map(val=>{
                                        return val.city + ':' + val.person_num + '<br/>'
                                        })
                                        value = valArr.join('')
                                    } catch (error) {
                                        
                                    }
                                    return name + ' 外来人口：<br/>' + value;
                                }
                            },
                            geo: {
                                map: 'china',
                                label: {
                                    emphasis: {
                                        show: false
                                    }
                                },
                                roam: false,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#082E78',
                                        borderColor: '#0A1740'
                                    },
                                    emphasis: {
                                        areaColor: '#2a333d'
                                    }
                                }
                            },
                            series: series
                        };
                        myChart1.setOption(option);
                    },
                    initEcharts2() {
                        var self = this
                        var myChart2 = echarts.init(document.getElementById('right_top'));
                        var option2 = {
                            title: {
                                text: '人次排名',
                                textStyle: {
                                    color: '#0162A6',
                                    fontSize: '14px',
                                    align: 'center'
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01],
                                axisLine: {
                                    lineStyle: {
                                        color: '#056DAD'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'category',
                                data: self.cityList,
                                axisLine: {
                                    lineStyle: {
                                        color: '#056DAD'
                                    }
                                }
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'bar',
                                    data: self.person_num,
                                    itemStyle: {
                                        normal: {
                                            color: '#3CB4E4'
                                        }
                                    }
                                }
                            ]
                        }
                        myChart2.setOption(option2);
                    },
                    initEcharts3() {
                        var self = this
                        var myChart3 = echarts.init(document.getElementById('right_bottom'));
                        var option3 = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                x: 'left',
                                data: this.citys,
                                textStyle: {
                                    color: '#0162A6'
                                }
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    selectedMode: 'single',
                                    radius: [0, '40%'],

                                    label: {
                                        normal: {
                                            position: 'inner'
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    data: this.list
                                },
                                {
                                    name: '来源',
                                    type: 'pie',
                                    radius: ['55%', '80%'],
                                    data: this.cityList
                                }
                            ]
                        }
                        self.option3 = option3
                        myChart3.clear()
                        myChart3.setOption(self.option3);
                        myChart3.on('legendselectchanged', function (params) {
                            if (params.selected[params.name]) {


                            }
                            var test = params.selected[params.name]

                            // 获取点击图例的选中状态
                            var isSelected = params.selected[params.name];
                            // 在控制台中打印
                            console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
                            // 打印所有图例的状态
                            console.log(params.selected);
                        });
                    },
                    // 增加
                    add() {
                        $('.add_content').css('display', 'block')
                    },
                    addSure() {
                        let option = {
                            method: 'POST',
                            url: 'collect/insertProvince',
                            data: this.citys
                        }
                        this.$HttpUtil(option, res => {
                            console.log(res)
                            if (res.code === 0) {
                                this.$NotifyUtil({
                                    message: res.msg
                                })
                                $('.add_content').css('display', 'none')
                                this.focusSource()
                            } else {
                                this.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    },
                    detele() {
                        var self = this
                        let option = {
                            method: 'GET',
                            url: 'collect/deleteProvince'
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                self.$NotifyUtil({
                                    message: res.msg
                                })
                                self.focusSource()
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    },
                    handleChange(val) {
                        console.log(val)
                    },
                    timeChange() {
                        this.mapList()
                        this.peopleList()
                    },
                    focusChange(val) {
                        this.citys = {}
                        this.vals = this.getCascaderObj(val, this.cityData);
                        this.citys = {
                            city: this.vals[1].label,
                            cityCode: this.vals[1].value,
                            province: this.vals[0].label,
                            provinceCode: this.vals[0].value
                        }
                    },
                    // 通过value查找laber
                    getCascaderObj(val, opt) {
                        return val.map(function (value, index, array) {
                            for (var itm of opt) {
                                if (itm.value === value) {
                                    opt = itm.children;
                                    return itm;
                                }
                            }
                            return null;
                        });
                    },
                    topChange() {
                        this.cityList = []
                        this.person_num = []
                        this.migrantsList()
                    },
                    // 外来人口排行榜
                    migrantsList() {
                        var self = this
                        let data = {
                            type: this.type
                        }
                        let option = {
                            method: 'POST',
                            url: 'collect/personRanking',
                            data: data
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                self.cityList = []
                                self.person_num = []
                                for (let item of res.data) {
                                    self.cityList.push(item.city)
                                    self.person_num.push(item.person_num)
                                    let datas = {
                                        province: item.province,
                                        city: item.city
                                    }
                                    self.provinceList.push(datas)
                                }
                                self.initEcharts2()
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    },
                    // 重点关注来源地
                    focusSource() {
                        let option = {
                            method: 'GET',
                            url: 'collect/getAllData'
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code == 0) {
                                this.cityList = []
                                this.list = []
                                this.citys = []
                                if (res.data) {
                                    // 市
                                    for (let item of res.data.city) {
                                        let citydata = {
                                            value: item.personNum,
                                            name: item.city
                                        }
                                        this.citys.push(item.city)
                                        this.cityList.push(citydata)
                                    }
                                    // 省
                                    for (let item of res.data.province) {
                                        let SFdata = {
                                            value: item.personNum,
                                            name: item.province
                                        }
                                        this.list.push(SFdata)
                                    }
                                }

                                this.initEcharts3()
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    },
                    // 飞机
                    mapList() {
                        var self = this
                        let data = {
                            type: this.timetype
                        }
                        let option = {
                            method: 'POST',
                            url: 'collect/personRankings',
                            data: data
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                self.mapsList = []
                                let provinceList = []
                                res.data.forEach(val => { 
                                    if (provinceList.indexOf(val.province) === -1) { 
                                        provinceList.push(val.province)
                                    } 
                                })
                                console.log(provinceList)
                                for(var i in provinceList){
                                    let mapData = [
                                            { name: '烟台' },
                                            { name: provinceList[i], value:[]}
                                    ];
                                    for (let item of res.data) {
                                        if(item.province === provinceList[i]){
                                            mapData[1].value.push(item)
                                        } 
                                    }
                                    self.mapsList.push(mapData)
                                }
                                
                                self.initEcharts()
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    },
                    // 外来人口监测
                    peopleList() {
                        var self = this
                        let data = {
                            seletced: this.timetype
                        }
                        let option = {
                            method: 'GET',
                            url: 'collect/attributionCountCheck',
                            data: data
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                this.people = res.data.dayCount
                                if (res.data.tongbi >= 0) {
                                    this.percentage = '增加' + res.data.tongbi + '人次'
                                } else {
                                    this.percentage = '减少' + Math.abs(res.data.tongbi) + '人次'
                                }
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        })
                    }
                },
                created() {
                    // this.focusSource()
                    // this.mapList()
                    var BJData = [
                        [{ name: '北京' }, { name: '上海', value: 95 }],
                        [{ name: '北京' }, { name: '广州', value: 90 }],
                        [{ name: '北京' }, { name: '大连', value: 80 }],
                        [{ name: '北京' }, { name: '南宁', value: 70 }],
                        [{ name: '北京' }, { name: '南昌', value: 60 }],
                        [{ name: '北京' }, { name: '拉萨', value: 50 }],
                        [{ name: '北京' }, { name: '长春', value: 40 }],
                        [{ name: '北京' }, { name: '包头', value: 30 }],
                        [{ name: '北京' }, { name: '重庆', value: 20 }],
                        [{ name: '北京' }, { name: '营口', value: 10 }]
                    ];
                },
                filters: {
                    codeToText(val) {
                        return CodeToText[val[0]] + '/' + CodeToText[val[1]]
                    }
                }
            })
        })
    </script>
</body>

</html>